<template>
    <div id="Airtag" v-if="data">
        <div class="airTag" >
            <div class="at-topHead">
                <div class="at-center980">
                    <div class="at-topHead-content">
                        <router-link to="/airtag" class="">AirTag</router-link>
                        <router-link to="/byAirtag">购买</router-link>
                    </div>
                </div>
            </div>
            <div class="at-wrapper">
                <div class="at-center980">
                    <div class="at-wrapper-content">
                        <div class="at-wrapper-img" :style="`backgroundImage: url(${encodeImgUrl('hero_airtag_hardware_startframe.jpg')}`"></div>
                        <div class="at-wrapper-text">
                            <h1 :style="`backgroundImage: url(${encodeImgUrl('logo_airtag.jpg')}`"></h1>
                            <p>丢三落四这门绝技，要失传了。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="at-intro">
                <div class="at-center980">
                    <div class="at-intro-text">
                        <div>
                            <p>
                                AirTag
                                是能帮你轻松追踪各种物品的高手。只要给钥匙串上
                                挂一个，往背包里塞一个，在打开查找 app
                                时，除了能追踪自己的 Apple
                                设备之外，你还能看到钥匙和背包这些物品在哪里。
                            </p>
                            <p>RMB 229 起</p>
                            <router-link to="/byAirtag" class="at-byButton">购买</router-link>
                        </div>
                    </div>
                </div>
            </div>

            <div class="at-gallery">
                <div class="at-center1268">
                    <div class="at-gallery-list">
                        <div class="at-gallery-headimg" :style="`backgroundImage: url(${encodeImgUrl('tile_hand.jpg')}`"></div>
                        <div class="at-gallery-otherimg at-gey-i-1" 
                        :style="`backgroundImage: url(${encodeImgUrl('tile_looped.jpg')}`"
                        ></div>
                        <div class="at-gallery-otherimg at-gey-i-2"
                        :style="`backgroundImage: url(${encodeImgUrl('tile_wallet.jpg')}`"></div>
                        <div class="at-gallery-otherimg at-gey-i-3" 
                        :style="`backgroundImage: url(${encodeImgUrl('tile_suitcase.jpg')}`"></div>
                        <div class="at-gallery-otherimg at-gey-i-4" 
                        :style="`backgroundImage: url(${encodeImgUrl('tile_keychain.jpg')}`"></div>
                    </div>
                </div>
            </div>
            <div class="at-sound">
                <div class="at-center980">
                    <div class="at-sound-content">
                        <div class="at-sound-text">
                            <h2 class="at-sound-text-h2">
                                出个声，<br />让你找到。
                            </h2>
                            <p class="at-sound-text-p">
                                只要放一个
                                AirTag，钱包在哪里这类问题会迎刃而解。通过查找
                                app 的全新“物品”标签页，或者直接开口说“嘿
                                Siri，我把钱包放哪了”，都能让 AirTag
                                的内置扬声器播放个声音来指示位置。如果它在附近，比如沙发底下或隔壁房间，循着声音就好找到了。
                            </p>
                        </div>
                        <div class="at-sound-atmp4">
                            <video muted loop autoplay="autoplay">
                                <source
                                    :src="encodeImgUrl('large.mp4')"
                                    type="video/mp4"
                                />
                            </video>
                        </div>
                    </div>

                    <div class="at-sound-content at-content2">
                        <div class="at-sound-img">
                            <img :src="encodeImgUrl('ultrawide.jpg')" />
                        </div>
                        <div class="at-sound-text">
                            <h2 class="at-sound-text-h2">
                                我在，我在这<br />我在这里。
                            </h2>
                            <p class="at-sound-text-p">
                                如果你的 AirTag 就在附近，iPhone
                                可以利用精确查找功能，指引你一步步找到它1。凭借超宽带技术，你甚至可以看到
                                AirTag 离得有多远，该朝哪个方向找。
                            </p>
                            <h3>精确查找功能适用于：</h3>
                            <ul>
                                <li>iPhone 11</li>
                                <li>iPhone 11 Pro 和 iPhone 11 Pro Max</li>
                                <li>iPhone 12 和 iPhone 12 mini</li>
                                <li>iPhone 12 Pro 和 iPhone 12 Pro Max</li>
                                <li>iPhone 13 和 iPhone 13 mini</li>
                                <li>iPhone 13 Pro 和 iPhone 13 Pro Max</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="at-network">
                <div class="at-center980">
                    <div class="at-network-head">
                        <h2>万千无名英雄，一起帮你找。</h2>
                        <p>
                            如果你的东西落在海滩或健身房等较远的地方，“查找”网络会帮你追踪到自己的
                            AirTag。这一庞大网络由全球数以亿计的 iPhone、iPad 和
                            Mac
                            组成，并通过精心设计，确保你的隐私在每一步都受到保护。
                        </p>
                    </div>
                    <div class="at-network-content">
                        <div class="at-nw-text at-headAnd-text">
                            <h2>它怎样发挥作用？</h2>
                            <p>
                                你的 AirTag
                                会发出安全的蓝牙信号，让“查找”网络中在它附近的设备可以侦测到。这些设备会将你
                                AirTag 的位置发送至 iCloud，然后你就可以在查找
                                app
                                的地图上看到它了。整个过程都是匿名的，并经过加密，以保护你的隐私安全。与此同时，查找也很高效，因此无需担心电池续航或数据流量的消耗。
                            </p>
                        </div>
                        <div class="at-nw-img">
                            <img :src="encodeImgUrl('how_it_works.jpg')" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="at-lostmode">
                <div class="at-center980">
                    <div class="at-lostmode-content">
                        <div class="at-lostmode-img">
                            <img :src="encodeImgUrl('lost_mode.jpg')" />
                        </div>
                        <div class="at-headAnd-text at-lostmode-text">
                            <h2>丢失模式，<br />让东西更好找。</h2>
                            <p>
                                与其他 Apple 设备一样，AirTag
                                也可以设成丢失模式。这样，当“查找”网络中的其他设备侦测到它时，你就会自动收到通知。你还可以通过设置，让别人在用支持
                                NFC 的智能手机轻触你的 AirTag
                                时，能够获得你的联系方式。顺道说一句，NFC
                                就是你在使用 Apple Pay 刷公交时会用到的技术。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="at-privacy">
                <div class="at-center980">
                    <div class="at-privacy-head">
                        <h2>隐私保护全内置。</h2>
                        <p>
                            你的 AirTag
                            在哪里，只有你自己能看到。你的位置数据和历史记录绝不会存储在
                            AirTag 中。传递你 AirTag
                            位置数据的设备也始终保持匿名，而且位置数据在查找的每一步都有加密保护。因此，就连
                            Apple 也不知道你 AirTag
                            的位置，以及帮忙找到它的设备是何身份。
                        </p>
                    </div>
                    <div class="at-privacy-content">
                        <div class="at-privacy-text at-headAnd-text">
                            <p>
                                <b style="color: black"
                                    >为防止意外跟踪，AirTag 早有先手。</b
                                >当别人的 AirTag 混入你的随身物品时，你的 iPhone
                                会发现它一直跟在你身边，并发送提醒给你。过了一段时间，如果你还没找到这个
                                AirTag，它就会开始播放声音，让你知道它在哪。
                            </p>
                            <p>
                                当然，如果碰巧你身边的朋友正带着
                                AirTag，或者你搭乘的地铁上很多人都有
                                AirTag，也不必担心。因为只要 AirTag
                                没离开主人身边，就不会触发这样的提醒。
                            </p>
                        </div>
                        <div class="at-privacy-img">
                            <img :src="encodeImgUrl('privacy.jpg')" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="at-enjoyit">
                <div class="at-center980">
                    <ul class="at-enjoyit-list">
                        <li class="at-enjoy-content">
                            <div class="at-enjoy-img">
                                <img :src="encodeImgUrl('icon_battery.jpg')" />
                            </div>
                            <div class="at-enjoy-text">
                                <h3>一粒电池，持久进行时。</h3>
                                <p>
                                    AirTag
                                    使用方便更换的标准电池，一粒电池可以用上一年多2。在该换电池时，你的
                                    iPhone 还会贴心地提醒你。
                                </p>
                            </div>
                        </li>

                        <li class="at-enjoy-content">
                            <div class="at-enjoy-img">
                                <img :src="encodeImgUrl('icon_water_resistant.jpg')" />
                            </div>
                            <div class="at-enjoy-text">
                                <h3>抗淋，抗溅，抗担心。</h3>
                                <p>
                                    假如你把 AirTag
                                    挂在钥匙串上，一不小心掉进了水洼里，或是被四溅的水花淋湿了。别担心，AirTag
                                    有出色的抗水能力3。
                                </p>
                            </div>
                        </li>

                        <li class="at-enjoy-content">
                            <div class="at-enjoy-img">
                                <img :src="encodeImgUrl('icon_emoji_it.jpg')" />
                            </div>
                            <div class="at-enjoy-text">
                                <h3>可文字，可表情，很可。</h3>
                                <p>
                                    在 apple.com.cn 或 Apple Store app 购买
                                    AirTag
                                    时，可选择免费镌刻文字、表情符号，或二者混搭。简单一刻，既展现个性，又增添乐趣。
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="at-accessor">
                <div class="at-center1268">
                    <div class="at-acc-head1">
                        <div class="at-acc-text">
                            <h2>更出彩，更好玩，更添个性。</h2>
                            <p>
                                Apple 设计了色彩缤纷的扣环和钥匙扣，方便你将
                                AirTag 挂到各种物品上。<br />AirTag
                                有单件装和四件装可选。准备好了吗？祝你玩得过瘾。
                            </p>
                            <router-link to="/byAirtag">选购 Apple AirTag 配件</router-link>
                        </div>
                        <div class="at-acc-img">
                            <!-- <img :src="`accessories.jpg` | encodeImgUrl(this)" /> -->

                            <img :src="encodeImgUrl(`accessories.jpg`)" />

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <style scoped src="../assets/css/airtag.css"></style> -->
    </div>
    <div v-else>
        加载中。。。。。。
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            data: null,
        }
    },
    computed: {
        encodeImgUrl() {
            return function(imgName) {
                return this.imgBaseUrl + this.data[imgName];
                
            }
        }
    },
    methods: {
        getData() {
            let url = "http://localhost:3000/HYLImg";
            axios.get(url)
            .then(res=>{return res.data})
            .then(d=>{
                this.data = d;
                console.log(d)
            })
            // console.log(this.imgBaseUrl)
        }
    },
    mounted () {
        this.getData();
    },
};
</script>
<style scoped src="../assets/css/airtag.css"></style>
<style lang="less" scoped>
#Airtag {
    width: 100%;
    height: 100%;
    background-color: #f5f5f7;
}
</style>